@use "../../assets/scss/fun" as *;

html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  line-height: 1.5;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  width: 100%;
  height: 100vh;
}
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .block {
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    margin: auto;
    padding: 20px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.6s, transform 0.6s;
    width: 30vw;
    border-radius: 10px;
    &:hover {
      transform: translate3d(-10px, -10px, 0);
    }
  }
  #block1 {
    background-color: #0bc;
    &:hover {
      box-shadow: shaded(#0bc, 50, 1, mod-example);
    }
  }
  #block2 {
    background-color: #f50;
    &:hover {
      box-shadow: shaded(#f50, 10, 10, mod-example);
    }
  }
}
